<template>
  <div :class="className" :style="{height:height,width:width}"></div>
</template>

<script>
  import echarts from 'echarts'
  require('echarts-wordcloud')
  import { debounce } from '@/utils'
  require('echarts/theme/macarons')
  export default {
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      }
    },
    mounted() {
      this.initChart()
      this.__resizeHanlder = debounce(() => {
        if (this.chart) {
          this.chart.resize()
        }
      }, 100)
      window.addEventListener('resize', this.__resizeHanlder)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      window.removeEventListener('resize', this.__resizeHanlder)
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          title: {
            // text: '静态交通关键词',
            // link:'https://github.com/ecomfe/echarts-wordcloud',
            // subtext: 'data-visual.cn'
            // sublink:'http://data-visual.cn',
          },
          tooltip: {
            show: true
          },
          series: [{
            type: 'wordCloud',
            gridSize: 20,
            sizeRange: [20, 85],
            // rotationRange: [0, 0],
            // shape: 'circle',
            textRotation: [0, 45, 90, -45],
            textPadding: 0,
            autoSize: {
              enable: true,
              minSize: 14
            },
            textStyle: {
              normal: {
                color: function(params) {
                  var colorList1 = [
                    '#AED82A','#F177C4','#4DED55','#FEAC0D','#3CDAFF',
                    '#3CDAFF','#F9753C'
                  ];
                  return colorList1[params.dataIndex];
                  /* return 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                  ].join(',') + ')'*/
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: [{
              name: '停车难',
              value: 3700000
            }, {
              name: '乱收费',
              value: 542000
            }, {
              name: '服务好',
              value: 1690000
            }, {
              name: '车位太少',
              value: 6960
            }, {
              name: '秩序差',
              value: 2410
            }, {
              name: '安全',
              value: 50400000
            }, {
              name: '保障',
              value: 17300000
            }, {
              name: '共享',
              value: 12700000
            }, {
              name: '老旧社区',
              value: 129000
            }, {
              name: '方便',
              value: 23200000
            }, {
              name: '出行',
              value: 12600000
            }, {
              name: '优惠',
              value: 23000000
            }, {
              name: '周边',
              value: 19800000
            }, {
              name: '管理',
              value: 48700000
            }, {
              name: '移动支付',
              value: 676000
            }, {
              name: '章丘停车',
              value: 751000
            }, {
              name: '规范',
              value: 10100000
            }, {
              name: '刮损',
              value: 3250
            }, {
              name: '车损',
              value: 223000
            }, {
              name: '保险',
              value: 16800000
            }, {
              name: '充电桩',
              value: 865000
            }, {
              name: '新能源',
              value: 5650000
            }, {
              name: '医院',
              value: 21500000
            }, {
              name: '火车站',
              value: 9760000
            }, {
              name: '距离远',
              value: 156000
            }, {
              name: '占道',
              value: 645000
            }, {
              name: '违章',
              value: 5560000
            }, {
              name: '跑冒滴漏',
              value: 27000
            }, {
              name: 'NB-IoT',
              value: 132000
            }, {
              name: '窄带物联网',
              value: 50500
            }, {
              name: '城市级',
              value: 70600
            }, {
              name: '泰华',
              value: 286000
            }]
          }]
        })
      }
    }
  }
</script>

